<template>
	<view class="app">
		<wrap title="基础用法" padding>
			<van-tag class="demo-margin-right">标签</van-tag>
			<van-tag class="demo-margin-right" type="primary">标签</van-tag>
			<van-tag class="demo-margin-right" type="success">标签</van-tag>
			<van-tag class="demo-margin-right" type="danger">标签</van-tag>
			<van-tag class="demo-margin-right" type="warning">标签</van-tag>
		</wrap>

		<wrap title="圆角样式" padding>
			<van-tag class="demo-margin-right" round>标签</van-tag>
			<van-tag class="demo-margin-right" round type="primary">标签</van-tag>
			<van-tag class="demo-margin-right" round type="success">标签</van-tag>
			<van-tag class="demo-margin-right" round type="danger">标签</van-tag>
			<van-tag class="demo-margin-right" round type="warning">标签</van-tag>
		</wrap>

		<wrap title="标记样式" padding>
			<van-tag class="demo-margin-right" mark>标签</van-tag>
			<van-tag class="demo-margin-right" mark type="primary">标签</van-tag>
			<van-tag class="demo-margin-right" mark type="success">标签</van-tag>
			<van-tag class="demo-margin-right" mark type="danger">标签</van-tag>
			<van-tag class="demo-margin-right" mark type="warning">标签</van-tag>
		</wrap>

		<wrap title="空心样式" padding>
			<van-tag class="demo-margin-right" plain>标签</van-tag>
			<van-tag class="demo-margin-right" plain type="primary">标签</van-tag>
			<van-tag class="demo-margin-right" plain type="success">标签</van-tag>
			<van-tag class="demo-margin-right" plain type="danger">标签</van-tag>
			<van-tag class="demo-margin-right" plain type="warning">标签</van-tag>
		</wrap>

		<wrap title="自定义颜色" padding>
			<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
			<van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
			<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
			<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
			<van-tag class="demo-margin-right" color="#ffe1e1" text-color="#ad0000">标签</van-tag>
		</wrap>

		<wrap title="标签大小" padding>
			<van-tag class="demo-margin-right" type="danger">标签</van-tag>
			<van-tag class="demo-margin-right" type="danger" size="medium">标签</van-tag>
			<van-tag class="demo-margin-right" type="danger" size="large">标签</van-tag>
		</wrap>

		<wrap title="可关闭标签" padding>
			<van-tag v-if="show.primary" class="demo-margin-right" type="primary" size="medium" closeable id="primary" @close="onClose">标签</van-tag>
			<van-tag v-if="show.success" class="demo-margin-right" type="success" size="medium" closeable id="success" @close="onClose">标签</van-tag>
		</wrap>
	</view>
</template>

<script>
	import Page from '../../common/page';
	export default {
		data() {
			return {
				show: {
					success: true,
					primary: true
				}
			}
		},
		methods: {
			onClose(event) {
				this.show[`${event.target.id}`] = false;
			}
		}
	}
</script>

<style>
	.van-tag {
		margin: 5px;
	}
</style>
